import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface CandlestickProps {
    chartId?: string;
    width?: string;
    height?: string;
    xAxisData?: string[];
    seriesData?: number[][];
}

@customElement('lit-candlestick')
export class LitCandlestick extends LitElement {
    @property({type: String}) chartId: string = 'lit-candlestick-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Array}) xAxisData: string[] = [];
    @property({type: Array}) seriesData: number[][] = [];

    option: echarts.EChartsOption = {
        xAxis: {
            data: this.xAxisData,
        },
        yAxis: {},
        series: [
            {
                type: 'candlestick',
                data: this.seriesData,
            }
        ]
    };

    static styles = style;

    updated(): void {
        (this.option.xAxis as any).data = this.xAxisData;
        (this.option.series as any)[0].data = this.seriesData;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-candlestick': LitCandlestick;
    }
}